import {useState} from 'react';
import Footer from './Footer';
import Header from './Header';
import List from './List'
import '../../app.scss'


export default function AppHook() {
    const [todos, setTodos] = useState([{id: '001', name: "吃饭", done: true}])

    const addTodo = (todo) => {
        const flag = todos.some(item => todo.name === item.name);
        if (flag) {
            return alert('名称重复')
        }
        setTodos([todo, ...todos])
    }

    const updateTodo = (id, done) => {
        const newTodos = todos.map((todoObj) => {
            if (todoObj.id === id) return {...todoObj, done}
            else return todoObj
        })
        setTodos(newTodos)
    }

    const deleteTodo = (id) => {
        const newTodos = todos.filter((item) => {
            return item.id !== id
        })
        setTodos(newTodos)
    }

    const updateAllTodoDone = (done) => {
        const newTodos = todos.map((item) => {
            return {...item, done}
        })
        setTodos(newTodos)
    }

    const clearAllDone = () => {
        const newTodos = todos.filter((todoObj) => {
            return !todoObj.done
        })
        setTodos(newTodos)
    }

    return (
        <div className='todo-container'>
            <div className='todo-wrap'>
                <Header addTodo={addTodo}/>
                <List todos={todos} updateTodo={updateTodo} deleteTodo={deleteTodo}/>
                <Footer todos={todos} clearAllDone={clearAllDone} updateAllTodoDone={updateAllTodoDone}/>
            </div>
        </div>
    )
}

